<template>
  <div class="competitive-wrapper">
    <!-- 周边竞争力分析 -->
    <top :configData="configData" @changeStatus="changeStatus" @changeStation="changeStation"></top>
    <!-- 同城油站竞争力分析 -->
    <ni-panel v-show="showChart" :titleArr="['同城油站竞争力分析','近30天']">
      <!-- 柱图 -->
      <div id="bar" style="width: 100%;height: 400px"></div>
      <!-- 描述 -->
      <case img="description-competitive.png" style="margin-bottom:48px"></case>
      <!-- 经营建议 -->
      <suggest></suggest>
    </ni-panel>
    <!-- 诊断案例 -->
    <ni-panel :titleArr="['诊断案例']">
      <case img="case.png"></case>
    </ni-panel>
  </div>
</template>
<script>
import initMix from './mixins/init'
import echarts from 'echarts'
import { getRankApi } from '@/api/intelligence'

export default {
  name:'intelligence_competitiveAnalysis',
  mixins:[initMix],
  data(){
    return {
      configData: {
        title: '同城油站竞争力分析',
        imgUrl: 'tips-competitive.png',
        btnName: '检测'
      },
      showChart: false, // 是否显示图表
      dataAxis: ['营业额', '订单量', '客单价', '访问量'],
      chartData: {},
      gasId: ''
    }
  },
  methods:{
    // 油站变化
    changeStation(gasId) {
      this.showChart = false
      this.gasId = gasId
    },
    // 获取油站数据
    async getData () {
      try {
        const {code, result} = await getRankApi({gasId: this.gasId})
        if (code !== 200) return
        this.chartData = result ? [result.totalAmountRankRate, result.orderCountRankRate, result.priceRankRate, result.gasPvRankRate] : [0,0,0,0]
      } catch (error) {
        console.log(error)
      }
    },
    // formatterNum(num){
    //   return Number(params.data) * 1000 / 10
    // },
    // 渲染图表
    initChart () {
      const myChart = echarts.init(document.getElementById('bar'))
      myChart.setOption({
        title: {
          text: '同城油站竞争力分析',
          left: '40%'
        },
        xAxis: {
          data: this.dataAxis,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#666666'
            }
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: function (value) {
              return value * 1000 / 10 + '%'
            },
            textStyle: {
              color: '#666666'
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: '30',
            label: { 
              show: true, 
              position: 'top', 
              rich: {//在 rich 里面，可以自定义富文本样式
                a: { 
                  color: '#999999',//顶部文本颜色
                  fontSize: 12//文字大小
                },
                b: {
                      fontSize: 16,
                      color: '#333333',
                      lineHeight: 22,
                      align: 'center',
                      fontWeight: 500
                  },
              }, 
              formatter: function(params){
                return [
                  '{a|打败同城油站}',
                  `{b|${Number(params.data) * 1000 / 10}%}`
                ].join('\n')
              }
            },

            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#7098FF'},
                  {offset: 1, color: '#3A6DFF'}
                ]
              )
            },
            data: this.chartData
          }
        ]
      })
    },
    // 开始检测，渲染图表
    changeStatus (status) {
      this.showChart = status
      if (status) {
        this.$nextTick(() => {
          this.initChart()
        })
      } else {
        this.getData()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.competitive-wrapper{
  background: #ffffff;
  padding: 0 50px 30px;
}
</style>